<template>
	<div class="thx-container">
		<div class="thx-text">
			<i class="el-icon-check"></i>
			问卷链接:
			<div>
				<el-link type="primary" :href="loc">
					{{loc}}
				</el-link>
			</div>
		</div>
		<div class="qrcode-container">
			<div id="qrcode" v-html="qrcode.svg()"></div>
		</div>
		<el-button
			class="return"
			type="primary"
			icon="el-icon-top-right"
			@click="$router.push('/')">
			返回主页
		</el-button>
	</div>
</template>

<script>
import  QRCode from "qrcode-svg"

export default {
	data() {
		const loc = (new URL(document.location)).origin + "/fill/" + this.$route.params.id
		return {
			loc: loc,
			qrcode: new QRCode({
				content: loc,
				padding: 4,
				width: 256,
				height: 256,
				color: "#000000",
				background: "#ffffff",
				ecl: "M",
			})
		}
	},
	mounted() {
		console.log(this.qrcode)
	}
}
</script>

<style scoped lang="sass">
.thx-container
	text-align: center
	margin-top: 5cm

.thx-text
	font-size: 1.5em
	margin: 1cm
</style>
